
<template>
  <div class="comprehensive_keer">
    <div class="content_comprehensive">
      <div class="t-title">办理中心</div>
      <el-button-group class="radioBtn" v-model="radioBtnSelect">
        <el-button @click="radioBtnClick('报名')" class="first">
          <img class="btnIco" src="~@/assets/img/processing_center/enroll.png" />
          <span class="btnTxt" style="color:rgb(250,119,119);">报名</span>
        </el-button>
        <el-button @click="radioBtnClick('续费')">
          <img class="btnIco" src="~@/assets/img/processing_center/renew.png" />
          <span class="btnTxt" style="color:rgb(135,193,67);">续费</span>
        </el-button>
        <el-button @click="radioBtnClick('转班')">
          <img class="btnIco" src="~@/assets/img/processing_center/changeclass.png" />
          <span class="btnTxt" style="color:rgb(56,133,248);">转班</span>
        </el-button>
        <el-button @click="radioBtnClick('退费')">
          <img class="btnIco" src="~@/assets/img/processing_center/refund.png" />
          <span class="btnTxt" style="color:rgb(250,119,119);">退费</span>
        </el-button>
        <el-button @click="radioBtnClick('交订金')">
          <img class="btnIco" src="~@/assets/img/processing_center/deposit.png" />
          <span class="btnTxt" style="color:rgb(135,193,67);">交订金</span>
        </el-button>
        <el-button @click="radioBtnClick('休学')" class="last">
          <img class="btnIco" src="~@/assets/img/processing_center/buy.png" />
          <span class="btnTxt" style="color:rgb(56,133,248);">休学</span>
        </el-button>
        <el-button @click="radioBtnClick('毕业离园')" class="last">
          <img class="btnIco" src="~@/assets/img/processing_center/mealfee_icon.png" />
          <span class="btnTxt" style="color:rgb(250,119,119);">毕业\离园</span>
        </el-button>
      </el-button-group>
    </div>
    <el-dialog
      class="commonDialog"
      :modal="false"
      :close-on-click-modal="commonDialog.clickmodal"
      :title="commonDialog.title"
      :visible.sync="commonDialog.visible"
      v-loading.fullscreen.lock="commonDialog.loading"
      element-loading-background="rgba(0, 0, 0, 0.1)"
    >
      <div class="enroll">
        <div class="txt">选择交定金学员</div>
        <div class="rowbox">
          <el-input
            class="inputtxt"
            style="font-size:0.16rem;"
            placeholder="请输入关键字"
            v-model="commonDialog.searchText"
            clearable
            ref="searchText"
          ></el-input>
          <el-button class="resetElement" type="primary" @click="searchData">查询</el-button>
          <el-button class="resetElement" type="primary" @click="dialog_deposit_addstudent">新增学员</el-button>
        </div>
        <template>
          <el-table
            :data="commonDialog.tableData"
            border
            max-height="240"
            style="width: 100%;font-size:0.16rem;"
            class="table"
            highlight-current-row
            @current-change="currentChange"
          >
            <el-table-column prop="student" label="学员"></el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>
            <el-table-column prop="phone" label="电话"></el-table-column>
          </el-table>
        </template>
        <div class="rowbox bottom">
          <el-button class="resetElement" type="primary" @click="closeCommonDialog">取消</el-button>
          <el-button class="resetElement" type="primary" @click="dialog_deposit_Click">下一步</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 引入其他组件 -->
    <!-- 交订金 -->
    <payEarnest class="popup" ref="payEarnest" @callback="updateData"></payEarnest>
    <!-- 新增学员 -->
    <clueAdd class="popup" ref="clueAdd" @callback="dialog_enroll_addstudent_callback"></clueAdd>
  </div>
</template>

<script>
import clueAdd from "@/components/clue_manage/subpage/clue_add"; //报名：新增线索/新增学员
import payEarnest from "@/components/clue_manage/subpage/pay_earnest"; //交订金
var vm, user;
export default {
  components: { clueAdd, payEarnest },
  data() {
    return {
      radioBtnSelect: "",
      commonDialog: {
        title: "交定金",
        clickmodal: false,
        loading: false,
        visible: false,
        searchText: "",
        tableData: []
      }
    };
  },
  methods: {
    /**交订金弹窗-新增学员 */
    dialog_deposit_addstudent() {
      this.$refs.clueAdd.init();
    },
    searchData() {},
    updateData() {},
    /**交订金弹窗-报名按钮点击 */
    dialog_deposit_Click() {
      let payEarnest = this.$refs.payEarnest;
      payEarnest.init(this.commonDialog.deposit.selectClue);
      this.closeCommonDialog();
    },
    /**选中学员回调 */
    currentChange() {},
    /**取消 */
    closeCommonDialog() {
      vm.commonDialog = {
        title: "交定金",
        clickmodal: false,
        loading: false,
        visible: false,
        searchText: "",
        tableData: []
      };
    },
    /**按钮点击 */
    radioBtnClick(tabString) {
      switch (tabString) {
        case "报名":
          var path = vm.$store.state.permit["103"].path;
          //传递参数
          this.$router.push({
            path: path
          });
          break;
        case "续费":
          var path = vm.$store.state.permit["104"].path;
          //传递参数
          this.$router.push({
            path: path
          });
          break;
        case "休学":
          var path = vm.$store.state.permit["105"].path;
          //传递参数
          this.$router.push({
            path: path
          });
          break;
        case "转班":
          var path = vm.$store.state.permit["106"].path;
          //传递参数
          this.$router.push({
            path: path
          });
          break;
        case "毕业离园":
          var path = vm.$store.state.permit["107"].path;
          //传递参数
          this.$router.push({
            path: path
          });
          break;
          case "退费":
          var path = vm.$store.state.permit["108"].path;
          //传递参数
          this.$router.push({
            path: path
          });
          break;
        case "交订金":
          vm.commonDialog.visible = true;
          break;
        default:
          break;
      }
    },
    /**报名成功回调 */
    enroll_callback() {},
    dialog_enroll_addstudent_callback() {},
    /**初始化 */
    initData() {}
  },
  mounted() {
    vm = this;
    this.initData();
  },
  computed: {}
};
</script>
<style lang="scss">
@import "@keer/style/processing_center/comprehensive.scss";
.commonDialog {
  z-index: 30 !important;
  top: 0.81rem !important;
  left: 2.1rem !important;
  background-color: rgba(0, 0, 0, 0.5) !important;

  .el-dialog {
    width: 8.55rem !important;

    .el-dialog__title {
      font-size: 0.22rem !important;
      color: #333333 !important;
    }
  }

  .enroll {
    padding: 0 0.2rem 0 0.2rem;
  }

  .enroll {
    .el-table {
      max-height: 2.4rem !important;

      .el-table__body-wrapper {
        max-height: 1.92rem !important;
      }
    }
  }

  .enroll {
    .el-table__body tr.current-row > td {
      background-color: #5eabf9;
    }

    .el-button {
      margin: 0.1rem;
      // width: 1rem;
    }

    .txt {
      font-size: 0.16rem;
    }

    .rowbox.bottom {
      display: flex;
      justify-content: center;

      .btn {
        margin: 0.1rem 0.5rem;
      }
    }

    .inputtxt {
      width: 2.5rem;
      margin: 0.1rem;
      margin-left: 0;
    }
  }
}
</style>